<script setup lang="ts">
import { QIcon } from "quasar";
import {} from "vue";

import {} from "qqlx-core";
import {} from "qqlx-cdk";

import ComContainerSide from "../ComContainer/ComContainerSide.vue";

const vueProps = defineProps<{
  size: string;
}>();
</script>

<template>
  <ComContainerSide>
    <template #left>
      <q-icon
        class="index index-top material-icons-outlined"
        name="shopping_cart"
        :size="vueProps.size || '200px'"
      ></q-icon>
    </template>
    <template #right>
      <q-icon
        class="index index-bottom material-icons-outlined"
        name="assignment"
        :size="vueProps.size || '200px'"
      ></q-icon>
    </template>
  </ComContainerSide>
</template>

<style scoped>
.index {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: inherit;
}

.index-top {
  transform: translate(-80%, -70%);
}
.index-bottom {
  transform: translate(-20%, -30%);
}
</style>
